<template>
	<div>
        <button @click='isOpen=!isOpen'>{{group.title}}</button>
        <transition name='slide'>
            <ul v-show='!isOpen' :style="ulStyle">
                <li v-for='item in group.data'>{{item}}</li>
            </ul>
        </transition>
    </div>
</template>

<script>
	export default{
		data:function(){
            return {
                isOpen:true,
            }
        },
        props:['group'],
        computed:{
            ulStyle:function(){
                var h = this.group.data.length*22+"px";
                return {
                    height:h
                }
            }
        }
	}
</script>

<style scoped>
ul{
    background-color: red;
    margin: 0;
}
div button{
    width: 100%;
    height: 50px;
}
.slide-enter{
    height: 0 !important;
}
.slide-enter-active{
    transition: all 0.7s linear;
    overflow: hidden;
}
.slide-leave-active{
    height: 0 !important;
    transition: all 0.7s linear;
    overflow: hidden;
}
</style>